<template>
  <div class="leftMenu">
   <el-menu
      unique-opened
      router
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#2FA0DB"
      active-text-color="#DA9F31"
    >
      <div class="menu" v-for="(item, i) in menu" :key="i">
        <!-- 有子菜单 -->
        <el-submenu
          v-if="item.children.length > 1"
          :index="item.children[0].path"
        >
          <template #title>
            <i :class="`iconfont ${item.icon}`"
              ><div class="title">{{ item.name }}</div></i
            >
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="(son, si) in item.children"
              :key="si"
              :index="item.path + '/' + son.path"
              >{{ son.name }}</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <!-- 没有子菜单:本身就没有/本来有多个子菜单，权限分出来变成只有一个 -->
        <el-menu-item
          v-if="item.children.length == 1"
          :index="
            item.path == ''
              ? item.children[0].path
              : item.path + '/' + item.children[0].path
          "
        >
          <i :class="$route.path==item.children[0].path?`iconfont ${item.icon} active`:`iconfont ${item.icon}`"
            ><div class="title">{{ item.children[0].name }}</div></i
          >
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
import Routers from "../router/index";
export default {
  data() {
    return {
      isCollapse: true,
      menu: [],
    };
  },
  created() {
    let routers = Routers.options.routes;
    let roleId=this.$store.state.user.roleId;
    /**========================前端控制路由============================= */
    // 分离有权限的路由
    function hasRole(item) {
      if (item.meta && item.meta.includes(roleId)) {
        return true;
      } else {
        return false;
      }
    }
    // 一二级路由
    function filterRouter(router) {
      let routerArr = router.filter((item) => {
        if (hasRole(item)) {
          if (item.children) {
            item.children = filterRouter(item.children);
          }
          return true;
        } else {
          return false;
        }
      });
      return routerArr;
    }
    let fRouter = filterRouter(routers);
    /**================后端返回路由，直接将返回的路由赋值给fRouter，再执行以下操作================== */
    // 过滤一级二级路由 isshow===true的显示
    this.menu = fRouter.filter((item) => {
      if (item.isShow == true && item.children) {
        item.children = item.children.filter((son) => son.isShow == true);
        return item;
      }
    });
  },
};
</script>

<style lang="less" scoped>
.leftMenu {
  width: 100px;
  height: 100%;
  .el-menu {
    overflow-y: scroll;
  }
  .el-menu::-webkit-scrollbar {
    display: none;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100px !important;
  min-height: 400px;
}
//改造导航样式
:deep(.el-menu--collapse) {
  width: 100%;
  height: 100%;
  //一级
  .el-submenu .el-submenu__title,
  .el-menu-item {
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .iconfont {
    font-size: 20px;
    color: #fff;
  }
  .icon-huabi,
  .icon-areachart,
  .icon-job {
    font-size: 26px;
  }
  //标题文字
  .title {
    text-align: center;
    line-height: 20px;
    font-size: 16px;
    margin-top: -15px;
  }
}

.el-menu-item-group {
  .el-menu-item,
  .el-submenu__title {
    height: 40px !important;
    line-height: 40px !important;
    color: #fff;
  }
}
// 菜单激活样式  //有子菜单，子菜单被选中时，父级菜单的颜色
:deep(.active),.el-menu--collapse .el-submenu.is-active i{
  color:rgb(218, 159, 49) !important;
}
.el-menu-item-group__title, .el-submenu__title i{
  color:#fff !important;
}
:deep(.el-submenu__title) {
  color:#fff !important;
}
</style>